<template>
  <div class="block">
    <div class="baseset">
      <h4>基本设置</h4>
      <el-form
        label-position="top"
        label-width="80px"
        :model="form"
        :rules="rules"
      >
        <!-- <el-form-item label="邮箱">
          <el-input v-model="form.email" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="昵称">
          <el-input v-model="form.nickName" clearable></el-input>
        </el-form-item>
        <el-form-item label="职能">
          <el-input v-model="form.duties" clearable></el-input>
        </el-form-item>
        <el-form-item label="工作单位">
          <el-input v-model="form.workUnit" clearable></el-input>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input
            type="textarea"
            v-model="form.desc"
            rows="4"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="国家/地区">
          <el-select v-model="form.country" placeholder="请选择" clearable>
            <el-option label="中国" value="zh"> </el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在省">
              <el-select
                v-model="form.selectProv"
                placeholder="请选择"
                @change="getProv"
                clearable
              >
                <el-option
                  v-for="(item, i) in provs"
                  :label="item.fdesc"
                  :value="{ value: item.fdesc, fid: item.fid }"
                  :key="i"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="市">
              <el-select
                v-model="form.selectCity"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, i) in citys"
                  :label="item.fdesc"
                  :value="item.fdesc"
                  :key="i"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="街道地址">
          <el-input v-model="form.region" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="联系电话">
          <el-input v-model="form.phone" clearable></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="updateInfo">更新基本信息</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="head_portrait">
      <h4>头像</h4>
      <div class="headimg_body">
        <div class="head_img">
          <img :src="headimg" />
        </div>
        <div class="setting_right" @click.stop="uploadHeadImg">
          <el-button type="primary" class="caption">更改头像</el-button>
        </div>
        <input
          type="file"
          accept="image/*"
          @change="handleFile"
          class="hiddenInput"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { modifyInfo } from "@/service/user";
import { getAddress } from "@/service/address";

export default {
  data() {
    return {
      form: {
        // email: "", //邮箱
        nickName: "", //昵称
        duties: "", //职能
        desc: "", //描述 简介
        // phone: "", //手机
        workUnit: "", //工作单位
        country: "zh", //国家
        selectProv: {}, //省
        selectCity: "", //市
        region: "", //街道地址
      },
      provs: [], //所有省
      citys: [], //所有市

      //规则
      rules: [],
      headimg: require("@/assets/images/bg.jpg"),
    };
  },
  computed: {
    ...mapGetters(["userInfo", "name"]),
    modifyParam() {
      return {
        nickName: this.form.nickName,
        briefIntroduction: this.form.desc,
        address:
          this.form.selectProv.value +
          "-" +
          this.form.selectCity +
          "-" +
          this.form.region,
        duties: this.form.duties,
        workUnit: this.form.workUnit,
      };
    },
  },
  methods: {
    // 打开图片上传
    uploadHeadImg: function () {
      this.$el.querySelector(".hiddenInput").click();
    },
    // 将头像显示
    handleFile: function (e) {
      let $target = e.target;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target;
        this.headimg = res.result;
      };
      reader.readAsDataURL(file);
    },
    //展示信息
    getInfo() {
      console.log(this.userInfo);
      if (this.userInfo) {
        this.form.nickName = this.userInfo.nickName;
        this.form.desc = this.userInfo.briefIntroduction;
        this.form.duties = this.userInfo.duties;
        this.form.workUnit = this.userInfo.workUnit;
        if (this.userInfo.address) {
          this.form.selectProv.value = this.userInfo.address.split("-")[0];
          this.form.selectCity = this.userInfo.address.split("-")[1];
          this.form.region = this.userInfo.address.split("-")[2];
        }
      }
    },
    //更改信息
    updateInfo() {
      modifyInfo(this.modifyParam).then((res) => {
        this.$store.dispatch("user/setUserInfo", this.modifyParam);
        this.$message({
          type: "success",
          message: "更新成功!",
        });
      });
    },

    //选择省分后执行
    getProv(params) {
      this.form.selectCity = "";
      this.citys = [];
      const { value, fid } = params;
      console.log(value, this.form.selectProv);
      getAddress(fid).then((res) => {
        this.citys = res.data;
      });
    },
  },
  mounted() {
    this.getInfo();
  },
  created() {
    getAddress().then((res) => {
      this.provs = res.data;
    });
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 100%;
  display: flex;
  .baseset {
    padding: 0 50px 20px;
    width: 45%;
    h4 {
      font-size: 18px;
      font-weight: normal;
      // margin: 0;
      margin: 10px 0 30px;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
    // .el-button {
    //   margin-top: 10px;
    // }
  }
  .head_portrait {
    padding: 50px;
    h4 {
      margin: 0;
      padding: 0;
      font-weight: normal;
      font-size: 14px;
    }
    .headimg_body {
      display: flex;
      flex-direction: column;
      align-items: center;
      .head_img {
        margin: 20px 0;
        width: 144px;
        height: 144px;
        margin-bottom: 12px;
        border-radius: 50%;
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .hiddenInput {
        display: none;
      }
    }
  }
}
</style>